import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import { cancelOrder } from '../service';
import type { CancelOrderParams } from '../types';

const CancelOrder = (props: { orderNo: string; reload: () => void; isArrear?: boolean }) => {
  const { orderNo, isArrear = false } = props;
  return (
    <ModalForm<CancelOrderParams>
      title="作废订单"
      width="35vw"
      layout="horizontal"
      modalProps={{ destroyOnClose: true, maskClosable: false }}
      initialValues={{
        orderNo,
      }}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      trigger={
        isArrear ? (
          <a>作废</a>
        ) : (
          <Button
            style={{
              height: '40px',
              width: '120px',
              lineHeight: '40px',
              margin: '10px auto 0',
              display: 'block',
              fontSize: '20px',
              padding: '0 20px',
            }}
            type="primary"
            danger
          >
            作 废
          </Button>
        )
      }
      onFinish={async (values) => {
        const res = await cancelOrder(values, isArrear);
        if (res.success) {
          message.success({ key: 'cancel_plate', content: res.message });
          props.reload();
          return true;
        }
        message.error({ key: 'cancel_plate', content: res.message });
        return false;
      }}
    >
      <ProFormText label="订单编号" name="orderNo" disabled required />
      <ProFormTextArea required label="作废理由" name="cancelReason" />
    </ModalForm>
  );
};

export default CancelOrder;
